<template>
	<view class="page-container pb-0">
		<up-navbar safeAreaInsetTop fixed placeholder title="达人课堂" :autoBack="true"></up-navbar>
		<view class="plr-24 pt-24">
			<swiper :circular="true" :autoplay="true" class="banners">
				<swiper-item v-for="(item, index) in [1, 2, 3]" :key="index">
					<image
						src="https://oiz.zhijingyou.com/upload/2024/lvapps/1726650540-532718099638976.jpg"
						mode="aspectFill"
					/>
				</swiper-item>
			</swiper>
			<view class="tabs" :style="{ top: `calc(${commonStore.statusBarHeight + commonStore.navbarHeight}px)` }">
				<view
					v-for="(item, index) in tabs"
					:key="index"
					:class="['tab-item', { active: item.id == activeId }]"
					@click="handleTabClick(item.id)"
				>
					{{ item.name }}
				</view>
			</view>
			<view class="pt-16">
				<view
					v-for="(item, index) in listData"
					:key="index"
					class="lesson-item"
					@click="navigateTo('/pages/feed/lesson/detail', { id: 123 })"
				>
					<image
						src="https://oiz.zhijingyou.com/upload/2024/lvapps/1726650540-532718099638976.jpg"
						class="icon-192 radius-16"
					/>
					<view class="flex-1 pl-16 flex-col space-between">
						<view>
							<view class="fs-28 font-bold text-2-ellipsis">
								恩施大峡谷+腾龙洞景区+武汉木兰草场+武汉滑雪
							</view>
							<view class="c-grey-86 mt-8">寻找鬼斧神工的自然奇观</view>
						</view>
						<view class="space-between flex-a-end">
							<view class="flex-a">
								<image :src="imgBaseUrl + 'icon-lesson.png'" class="icon-28" />
								<text class="c-grey-86 ml-4">82827人已学习</text>
							</view>
							<zjy-button size="small" pd="28">去学习</zjy-button>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script setup lang="ts">
import useCommonStore from "@/store/common"
import { navigateTo } from "@/utils/page-redirect"

const imgBaseUrl = inject("imgBaseUrl")
const commonStore = useCommonStore()
const activeId = ref("0")
const tabs = ref([
	{ name: "全部", id: "0" },
	{ name: "新人指引", id: "1" },
	{ name: "爆款打造", id: "2" },
])
const listData = ref(new Array(20).fill(1))
const handleTabClick = (id: string) => {
	activeId.value = id
}
</script>
<style lang="scss" scoped>
.banners {
	width: 100%;
	height: 288rpx;
	border-radius: 24rpx;
	margin-bottom: 16rpx;
	overflow: hidden;
	image {
		width: 100%;
		height: 100%;
	}
}
.tabs {
	position: sticky;
	height: 88rpx;
	display: -webkit-box;
	overflow-x: auto;
	overflow-y: hidden;
	font-size: 28rpx;
	color: $c-grey-4e;
	background: #fff;
	z-index: 2;

	.tab-item {
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		& + .tab-item {
			margin-left: 48rpx;
		}

		&.active {
			color: $c-black-1d;
			font-weight: bold;
			&::after {
				position: absolute;
				content: "";
				z-index: -1;
				right: -12rpx;
				width: 46rpx;
				height: 36rpx;
				bottom: 14rpx;
				background-image: url(#{$imgBaseUrl}tab-active.png);
				background-position: center center;
				background-size: cover;
			}
		}
	}
}
.lesson-item {
	padding-bottom: 28rpx;
	display: flex;
	position: relative;
	& + .lesson-item {
		padding-top: 28rpx;
		&::before {
			position: absolute;
			content: "";
			top: 0;
			left: 208rpx;
			right: 0;
			height: 1rpx;
			background: $c-grey-e5;
		}
	}
}
</style>
